@import '../../less/less_variable';
.l-button {
  cursor: pointer;
  height: @height32;
  .display-inline();
  color: #000;
  background: none;
  border: @border1 solid #999;
  //border: 1px solid var(--l-primary-color6);
  border-radius: @basicRadius8 * 0.5;
  font-size: @fontSize14;
  padding: 0 @basicRadius8;
  overflow: hidden;
  margin-right: @margin5 * 2;
}
.l-button:hover {
  transition: all var(--l-transition-time5) linear;
  background: var(--l-primary-color3);
  border-color: var(--l-primary-color6);
  color: var(--l-primary-color6);
}
.l-primary-button {
  //height: 32px;
  //.display-inline();
  color: #fff;
  background: var(--l-primary-color6);
  border: none;
  //border-radius: @basicRadius * 0.5;
  //font-size: @fontSize;
  //padding: 0 @basicRadius;
  //overflow: hidden;
  //margin-right: 10px;
}
.l-primary-button:hover {
  transition: all var(--l-transition-time5) linear;
  background: var(--l-primary-color5);
  color: #fff;
}

/*移入有遮罩--开始*/
.l-mask-button {
  position: relative;
  z-index: @zIndex1 * 2;
  border: none;
  //background-size: 400%;
}
.l-mask-button:hover::before {
  transform: scaleX(1);
}
.button-content {
  position: relative;
  z-index: @zIndex1;
}
.l-mask-button::before {
  content: "";
  position: absolute;
  z-index: @zIndex1 * -1;
  top: @every0;
  left: @every0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  width: 100%;
  height: inherit;
  border-radius: inherit;
  background: linear-gradient(82.3deg, rgba(150,93,233,1) 10.8%, rgba(99,88,238,1) 94.3%);
  //background: linear-gradient(82.3deg, #39c5bb 10.8%, rgba(57, 197, 187, .7) 94.3%);
  /*background: linear-gradient(82.3deg,var(--l-primary-color6) 10.8%,var(--l-primary-color2) 94.3%);*/
  transition: all var(--l-transition-time3);
}
/*移入有遮罩--结束*/

/*分裂公用-开始*/
.commonButton {
  position: relative;
  z-index: @zIndex1;
  overflow: hidden;
}
.commonButtonAfter {
  content: "";
  background: var(--l-primary-color3);
  position: absolute;
  z-index: @zIndex1 * -1;
  left: -50%;
  right: -50%;
  top: @every0;
  bottom: @every0;
  transition: all var(--l-transition-time5);
}
.commonButtonHoverAfter {
  -webkit-transition: all var(--l-transition-time5);
  transition: all var(--l-transition-time5);
}
/*分裂公用-结束*/
/*移入分裂--开始*/
.l-divide-button {
  .commonButton();
}
.l-divide-button:after {
  .commonButtonAfter();
  transform: skewX(0deg) scale(0,2);
}
.l-divide-button:hover:after {
  .commonButtonHoverAfter();
  transform: skewX(0deg) scale(1,1);
}
/*移入分裂--结束*/

/*移入分裂1--开始*/
.l-divide1-button {
  .commonButton();
}
.l-divide1-button:after {
  .commonButtonAfter();
  transform: skewX(45deg) scale(0,2);
}
.l-divide1-button:hover:after {
  .commonButtonHoverAfter();
  transform: skewX(45deg) scale(1,1);
}
/*移入分裂1--结束*/

/*移入分裂2--开始*/
.l-divide2-button {
  .commonButton();
}
.l-divide2-button:after {
  .commonButtonAfter();
  transform: skewX(90deg) scale(0,2);
}
.l-divide2-button:hover:after {
  .commonButtonHoverAfter();
  transform: skewX(45deg) scale(1,1);
}
/*移入分裂2--结束*/

/*移入分裂3--开始*/
.l-divide3-button {
  .commonButton();
}
.l-divide3-button:after {
  .commonButtonAfter();
  transform: skewX(180deg) scale(0,2);
}
.l-divide3-button:hover:after {
  .commonButtonHoverAfter();
  transform: skewX(45deg) scale(1,1);
}
/*移入分裂3--结束*/

/*移入分裂3--开始*/
.l-divide4-button {
  .commonButton();
}
.l-divide4-button:after {
  .commonButtonAfter();
  transform: skewX(360deg) scale(0,2);
}
.l-divide4-button:hover:after {
  .commonButtonHoverAfter();
  transform: skewX(45deg) scale(1,1);
}
/*移入分裂3--结束*/